<!DOCTYPE html >
<!--解决idea thymeleaf 表达式模板报红波浪线-->
<!--suppress ALL -->
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Oriole系统</title>
    <script th:replace="common/head::static"></script>
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <div class="layui-header" th:style="${' background-color:' + sysConfigVo.sysColor + ' !important;'}">
        <div class="layui-logo">
            <img th:src="${sysConfigVo.sysLogo}" class="layui-nav-img"/>
            <a th:text="${sysConfigVo.sysName}" th:href="${sysConfigVo.sysIndex}">-</a>
        </div>
        <!-- 头部区域（可配合layui已有的水平导航） -->
        <ul class="layui-nav layui-layout-left" lay-filter="oriole-lay-filter-nav">
            <li class="layui-nav-item" th:each="menu,iterStat : ${shortcutMenuVos}"
                th:unless="${#lists.size(menu.children)} eq 0">
                <a class="" href="javascript:;" th:text="${menu.name}">---</a>
                <dl class="layui-nav-child">
                    <dd th:each="childMenu,childIterStat : ${menu.children}">
                        <a class="oriole-menu" th:data-url="${childMenu.url}" th:lay-id="${childMenu.id}"
                           href="javascript:;" th:text="${childMenu.name}">---</a>
                    </dd>
                </dl>
            </li>
            <li class="layui-nav-item" th:each="menu,iterStat : ${shortcutMenuVos}"
                th:if="${#lists.size(menu.children)} eq 0">
                <a class="oriole-menu" th:data-url="${menu.url}" th:lay-id="${menu.id}" href="javascript:;"
                   th:text="${menu.name}">---</a>
            </li>
        </ul>
        <ul class="layui-nav layui-layout-right" lay-filter="oriole-lay-filter-nav">
            <li class="layui-nav-item">
                <a href="https://www.jetbrains.com/?from=oriole" target="_blank">
                    <img src="/common/img/jetbrains.png" class="layui-nav-img">
                    <span>JetBrains</span>
                </a>
            </li>
            <li class="layui-nav-item">
                <a href="javascript:;">
                    <img th:src="'/sysFile/getByUrl?url=' + ${#strings.replace(sysUserVo.avatar, '\', '//')}"
                         class="layui-nav-img">
                    <span th:text="${sysUserVo.username}">---</span>
                </a>
                <dl class="layui-nav-child">
                    <dd><a class="oriole-menu" th:data-url="'/sysUser/findSysUserVo/' + ${sysUserVo.id}"
                           th:lay-id="'findSysUserVo_'+${sysUserVo.id}" href="javascript:;">基本资料</a></dd>
                    <dd><a class="oriole-menu" th:data-url="'/sysUser/changePassword'"
                           th:lay-id="'changePassword'+${sysUserVo.id}" href="javascript:;">修改密码</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item">
                <a class="oriole-logout" href="javascript:;">退出</a>
            </li>
        </ul>
    </div>

    <div class="layui-side layui-bg-black" th:style="${' background-color:' + sysConfigVo.sysColor + ' !important;'}">
        <div class="layui-side-scroll">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="layui-nav layui-nav-tree" lay-filter="oriole-lay-filter-nav"
                th:style="${' background-color:' + sysConfigVo.sysColor + ' !important;'}">
                <li th:each="menu,iterStat : ${sysMenuVos}"
                    th:class='${iterStat.first?"oriole-li layui-nav-item layui-nav-itemed":"oriole-li layui-nav-item"}'
                    th:unless="${#lists.size(menu.children)} eq 0">
                    <a class="" href="javascript:;" th:text="${menu.name}">---</a>
                    <dl class="layui-nav-child">
                        <dd th:each="childMenu,childIterStat : ${menu.children}">
                            <a class="oriole-menu" th:data-url="${childMenu.url}" th:lay-id="${childMenu.id}"
                               href="javascript:;" th:text="${childMenu.name}">---</a>
                        </dd>
                    </dl>
                </li>
                <li th:each="menu,iterStat : ${sysMenuVos}"
                    th:class='${iterStat.first?"oriole-li layui-nav-item layui-nav-itemed":"oriole-li layui-nav-item"}'
                    th:if="${#lists.size(menu.children)} eq 0">
                    <a class="oriole-menu" th:data-url="${menu.url}" th:lay-id="${menu.id}" href="javascript:;"
                       th:text="${menu.name}">---</a>
                </li>
            </ul>
        </div>
    </div>

    <div class="layui-body" style="overflow-y: hidden;">
        <!-- 内容主体区域 -->
        <div class="layui-tab layui-tab-card" lay-allowClose="true" lay-filter="oriole-lay-filter-tab">
            <ul class="layui-tab-title">
                <li class="layui-this">首页</li>
            </ul>
            <div class="layui-tab-content">
                <div class="layui-tab-item layui-show">
                    <iframe th:src="@{/home}" name="frameHome"
                            style="width: 100%;height: 600px;overflow-y: scroll;border: none"></iframe>
                </div>
            </div>
        </div>
    </div>

    <div class="layui-footer">
        <!-- 底部固定区域 -->
        <span th:text="${sysConfigVo.sysBottomText}">---</span>
    </div>
</div>
<script>
    //JavaScript代码区域
    layui.use(['layer', 'element'], function () {
        const element = layui.element,
            $ = layui.jquery,
            layer = layui.layer;
        const $body = $('body');

        element.on('nav(oriole-lay-filter-nav)', function (elem) {
            const height = window.screen.height - 280;
            if ((elem.context.attributes)["data-url"] && (elem.context.attributes)["lay-id"]) {
                const url = (elem.context.attributes)["data-url"].value;
                const id = (elem.context.attributes)["lay-id"].value;
                element.tabDelete('oriole-lay-filter-tab', id);
                element.tabAdd('oriole-lay-filter-tab', {
                    title: elem.text(),
                    content: '<iframe src="' + url + '" name="frame' + id + '" style="width: 100%;height: ' + height + 'px;overflow-y: scroll;border: none;"></iframe>',
                    id: id
                });
                element.tabChange('oriole-lay-filter-tab', id);
            }
        });

        $body.on("click", ".oriole-li", function (e) {
            $(this).siblings("li").removeClass("layui-nav-itemed");
        });

        $body.on("click", ".oriole-logout", function (e) {
            $.get(ctx + "/logout", function (data) {
                if (data.value === 200) {
                    layer.msg(data.message, {icon: 1, time: 1000}, function () {
                        window.location.href = "/index";
                    });
                } else {
                    layer.msg(data.message, {icon: 2, time: 2000});
                }
            });
        });
    });
</script>
</body>
</html>